iT邦幫忙

2022 iThome 鐵人賽

DAY 9
0
自我挑戰組

從零開始Vuejs系列 第 9

[Day9] v-once指令

  • 分享至 

  • xImage
  •  

今天是第九天,我想分享一下v-once這個指令
這個指令可以用在只想讓元件被渲染一次,在第二次渲染之後,不會重新渲染

我們拿第六天HelloWorld來進行程式碼改寫

這裡是HTML的部分

<div id="app">
    <div>無v-once</div>
    <input v-model="message">
    <div>{{message}}</div>
    <br>
    <div>有v-once</div>
    <input v-model="message">
    <div v-once>{{message}}</div>
</div>

這裡是JS的部分

<script>
    const app ={
    data(){
        return{
            message:'hello world!!!',
            }
        }
    }
    Vue.createApp(app).mount('#app')
</script>

可以看到把HelloWorld打成Hello上下渲染的變化,上面沒有v-once,
會隨著一次次渲染而變化,下面有v-once就會固定在HelloWorld

更改前
https://ithelp.ithome.com.tw/upload/images/20220921/20151006MwydI7ABOy.png
更改後
https://ithelp.ithome.com.tw/upload/images/20220921/20151006RkSnMd9fjb.png

v-once這個指令分享到這邊,我們第十天見


上一篇
[Day8] v-bind屬性綁定
下一篇
[Day10] v-model 修飾符: number
系列文
從零開始Vuejs30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言